import React, { useState,useRef } from "react";
import PickerItem from "./typings/index";
import PickColumn from './PickColumn'
import cx from "classnames";
import "./index.scss";
interface PickerProps {
  /*  选项*/
  options: PickerItem[][];
  /* 类名 */
  className?: string;
  style?: React.CSSProperties;
  /*确认选项*/
  confirmText?: React.ReactNode;
  /*取消选项*/
  cancelText?: React.ReactNode;
  /*选项高度*/
  optionHeight?: React.ReactNode;
  /* 是否显示 */
  visible: boolean;
  /* 关闭容器 */
  onClose: () => void;
  /*确认事件*/
  onConfirm?: (value: string[]) => void;
  /*取消事件*/
  onCancel?: () => void;

}

const qhboxCls = "qh-picker-box";

function Picker({
  options,
  visible,
  className,
  style,
  confirmText = "确认",
  optionHeight = "取消",
  onConfirm,
  onClose,
  
}: PickerProps): JSX.Element {

  const [value,setValue] = useState<PickerItem[]>([]);
  const currentValuesRef = useRef([])
  const baseStyle = {
    bottom: visible ? "0" : "-100%",
    transitionDuration: "200ms",
    transitonProperty: "bottom",
  };

 
 const onChange = (item:PickerItem,i) =>{
  currentValuesRef.current[i] = item.value
 }
 
  const onCancleBtn = (): void => {
    onClose();
  };

  return (
    <>
      <div
        id={'picker'}
        className={cx(qhboxCls, className)}
        style={{ ...baseStyle, ...style }}
        onTransitionEnd={() => {
          
        }}
      >
        <div className={cx(`${qhboxCls}-header`)}>
          <div className={cx(`${qhboxCls}-header-btn`)} onClick={()=>{onConfirm(currentValuesRef.current); onClose();}}>
            {confirmText}
          </div>
          <div
            className={cx(
              `${qhboxCls}-header-btn`,
              `${qhboxCls}-header-btn-ok`
            )}
            
            onClick={onCancleBtn}
          >
            {optionHeight}
          </div>
        </div>

        <div className={cx(`${qhboxCls}-content`)}>
          {
            options.map((item,i)=>(
              <PickColumn
              key={i}
              options={item}
              onChange={(value): void=>onChange(value,i)}
              />
            ))
          }
          {/* 蒙层 */}
          <div className={cx(`${qhboxCls}-mask`)}>
            <div className={cx(`${qhboxCls}-mask-top`)} />
            <div className={cx(`${qhboxCls}-mask-middle`)} />
            <div className={cx(`${qhboxCls}-mask-bottom`)} />
          </div>
        </div>
      </div>
    </>
  );
}

export default Picker;
